import {Button} from '@tarojs/components'
import Taro from '@tarojs/taro'
import Card from 'components/Card'
import Icon from 'components/Icon'
import s from '../index.module.scss'
import getSystemInfo from "../../../../utils/getSystemInfo";

interface AlbumCardProps {
  title: string,
  description: string,
  _id: string,
  children?: any
}

export function navigateToAlbum(title, _id) {
  const info = getSystemInfo()

  // pc 端
  if (['mac', 'windows', 'devtools'].includes(info.platform)) {
    return Taro.eventCenter.trigger('home/modal/show', {title, _id})
  }

  // 移动端
  Taro.navigateTo({
    url: `/pages/directory/index?title=${title}&_id=${_id}`
  })
}

export default function AlbumCard(props: AlbumCardProps) {
  const {_id, title, description, children} = props

  const __click = (e) => {
    e.stopPropagation()
    navigateToAlbum(title, _id)
  }

  return (
    <Card>
      <div className={s.top}>
        <div className={s.lef}>
          <div id={s.title}>{title}</div>
          <div id={s.desc}>{description}</div>
        </div>
        <Button id={s.btn} size='mini' onClick={__click}>
          <Icon name="rect_255" style={{marginRight: 'var(--px4)'}} size={18} />
          立即阅读
        </Button>
      </div>
      {children}
    </Card>
  )
}
